<template>
  <div class="container">
    <div class="display">
      <div id="Catalog">
        <div class="userInfo">
          <h3 style="font-family: huayuan;">用户信息</h3>
          <h3>User Information</h3><br>
          User ID:
          <span style="color: rgb(190, 158, 111);">
            {{ username }}
          </span>
        </div>

        <form action="saveAccount" method="post">
          <table class="changePassword">
            <tr>
              <td>New password:</td>
              <td><input type="text" name="password"/></td>
            </tr>
            <tr>
              <td>Repeat password:</td>
              <td><input type="text" name="repeatedPassword"/></td>
            </tr>
          </table>

          <table>
            <tr>
              <td>First name:</td>
              <td><input type="text" name="firstname" :value="account.firstName" readonly="readonly"/></td>
            </tr>
            <tr>
              <td>Last name:</td>
              <td><input type="text" name="lastname" :value="account.lastName" readonly="readonly"/></td>
            </tr>
            <tr>
              <td>Email:</td>
              <td><input type="text" name="email" :value="account.email" readonly="readonly"/></td>
            </tr>
            <tr>
              <td>Phone:</td>
              <td><input type="text" name="phone" :value="account.phone" readonly="readonly"/></td>
            </tr>
            <tr>
              <td>Address 1:</td>
              <td><input type="text" name="address1" :value="account.address1" readonly="readonly"/></td>
            </tr>
            <tr>
              <td>Address 2:</td>
              <td><input type="text" name="address2" :value="account.address2" readonly="readonly"/></td>
            </tr>
            <tr>
              <td>City:</td>
              <td><input type="text" name="city" :value="account.city" readonly="readonly"/></td>
            </tr>
            <tr>
              <td>State:</td>
              <td><input type="text" name="state" :value="account.state" readonly="readonly"/></td>
            </tr>
            <tr>
              <td>Zip:</td>
              <td><input type="text" name="zip" :value="account.zip" readonly="readonly"/>
              </td>
            </tr>
            <tr>
              <td>Country:</td>
              <td><input type="text" name="country" :value="account.country" readonly="readonly"/></td>
            </tr>
          </table>

          <h3>Profile Information</h3>

          <table>
            <tr>
              <td>Language Preference:</td>
              <td>
                <select v-model="account.langpref">
                  <option>English</option>
                  <option>Chinese</option>
                </select>
              </td>
            </tr>
            <tr>
              <td>Favourite Category:</td>
              <td>
                <select v-model="account.favcategory">
                  <option v-for="category in categories">{{ category.categoryId }}</option>
                </select>
              </td>

            </tr>
            <tr>
              <td>Enable MyList</td>
              <td>
                <input type="checkbox" id="listOption" v-model="mylistopt" readonly="readonly">
              </td>
            </tr>
            <tr>
              <td>Enable MyBanner</td>
              <td>
                <input type="checkbox" id="bannerOption" v-model="banneropt" readonly="readonly">
              </td>
            </tr>


          </table>

          <div id="save" style="position: relative;top: 30px;right: 200px">
            <button type="submit" name="editAccount" value="Save Account Information">SAVE</button>
          </div>

        </form>
        <div id="draw-border" style="position:relative;bottom: 35px;left: 170px">
          <router-link :to="{path:'/orderList/'+this.username}">
            <button>My Order</button>
          </router-link>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import $ from 'jquery'
export default {
  name: "myAccountForm",
  data() {
    return {
      username: localStorage.getItem('username'),
      account: {},
      mylistopt: null,
      banneropt: null,
      categories: []
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      //获取用户信息
      axios({
        url: "http://localhost:8088/account/myAccountForm/" + this.username,
        method: 'get',
      }).then((res) => {
        this.account = res.data.data
        console.log(this.account)
        localStorage.setItem('account',JSON.stringify(res.data.data))
        //重新赋值mylistopt与banneropt
        this.mylistopt = this.account.mylistopt===1
        this.banneropt = this.account.banneropt===1
      }).catch((err) => {
        console.log(err)
      });
      //获取所有categories信息
      axios({
        url: "http://127.0.0.1:8088/catalog/allCategory",
        method: 'get',
      }).then(res => {
        this.categories = res.data.data
        console.log(this.categories)
      })

      //设置表单不可编辑
      this.editDisable()
    },
    editDisable(){

    }
  }
}
</script>

<style src="../../assets/css/shop.css" scoped></style>
<style scoped>
@font-face {
  font-family: 'huayuan';
  src: url('../../assets/font/花园肉丸.ttf');
}

@font-face {
  font-family: 'cm';
  src: url('../../assets/font/Begilas.otf');
}

.display {
  overflow-y: auto;
  overflow-x: hidden;
  width: 700px;
  font-family: cm;
  margin: 0 auto;
  top: 100px;
}

table {
  width: 80%;
}

.userInfo {
  font-size: 20px;

}

.userInfo p {
  display: inline;
}

.userInfo h3 {
  display: inline;
  font-size: 26px;
}
</style>